<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition
	xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui"	
	xmlns:pe="http://primefaces.org/ui/extensions"	
	xmlns:of="http://omnifaces.org/functions"
	template="/WEB-INF/templates/template.xhtml">
	
<ui:define name="headIncludes">
	<f:event listener="#{clienteBean.initializeForm(param.clienteId)}" type="preRenderView"/>
</ui:define>
	
	<ui:define name="pageName">#{clienteBean.acao}</ui:define>
	
	<ui:define name="buttons">
		<p:commandButton value="Salvar" style="height:28px;" action="#{clienteBean.save}" update="@this, messageFormCliente" icon="ui-icon-disk"/>
		<p:commandButton value="Voltar" style="height:28px;" action="#{clienteBean.changeToList}" process="@this" icon="ui-icon-arrowreturnthick-1-w"/>
	</ui:define>
	
	<ui:define name="content">	
		<p:panel>
			<div>
				<p:messages id="messageFormCliente"/>
				
				<h:panelGrid columns="4" style="padding:5px;">
					<h:outputText value="Código" />
					<h:outputText value="Nome *" />
					<h:outputText value="Data de nascimento" />
					<h:outputText value="Sexo" />
					
					<p:inputText style="width:100px;" disabled="true" value="#{clienteBean.currentCliente.id}"/>
					<p:inputText style="width:400px;" value="#{clienteBean.currentCliente.nome}" required="true" requiredMessage="Informe o nome." maxlength="100"/>
					<p:inputMask mask="99/99/9999" style="width:120px;" value="#{clienteBean.currentCliente.dataNascimento}">
						<f:convertDateTime pattern="dd/MM/yyyy" />
					</p:inputMask>
					<p:selectOneRadio id="options" value="#{clienteBean.currentCliente.sexo}">  
	            		<f:selectItem itemLabel="Masculino" itemValue="M" />  
	           			<f:selectItem itemLabel="Feminino" itemValue="F" />  
	        		</p:selectOneRadio> 
				</h:panelGrid>
				
				<h:panelGrid columns="4" style="padding:5px;">
					<h:outputText value="Logradouro *" />
					<h:outputText value="Número *" />
					<h:outputText value="Complemento" />
					<h:outputText value="Bairro *" />
									
					<p:inputText style="width:350px;" value="#{clienteBean.currentCliente.logradouro}" maxlength="40" required="true" requiredMessage="Informe o logradouro."/>
					<p:inputText style="width:80px;" value="#{clienteBean.currentCliente.numero}" maxlength="10"  required="true" requiredMessage="Informe o número."/>
					<p:inputText style="width:150px;" value="#{clienteBean.currentCliente.complemento}" maxlength="20"/>
					<p:inputText style="width:200px;" value="#{clienteBean.currentCliente.bairro}" maxlength="20" required="true" requiredMessage="Informe o bairro."/>
				</h:panelGrid>
				
				<h:panelGrid columns="5" style="padding:5px;">			
					<h:outputText value="CEP" />		
					<h:outputText value="Cidade *" />	
					<h:outputText value="Estado" />	
					<h:outputText value="País" />		
					<h:outputText value="" />
					
					<p:inputMask mask="99.999-999" style="width:150px;" value="#{clienteBean.currentCliente.cep}"/>
					
					<p:autoComplete id="inputCidade" var="cidade" value="#{clienteBean.currentCliente.cidade}" maxlength="30"
						itemLabel="#{cidade.cidade}" itemValue="#{cidade}" size="50" required="true" requiredMessage="Selecione a cidade."
						converter="cidadeConverter" completeMethod="#{clienteBean.getCidadeByQuery}">
						<p:ajax event="itemSelect" process="@this inputCidade" update="inputEstado inputPais inputDddTel inputDddCel" listener="#{clienteBean.handleCidadeSelected}"/>
					</p:autoComplete>
					
					<p:inputText style="width:200px;" disabled="true" value="#{clienteBean.currentCliente.cidade.estado.estado}" id="inputEstado"/>	
					<p:inputText style="width:150px;" disabled="true" value="#{clienteBean.currentCliente.cidade.estado.pais.pais}" id="inputPais"/>				
					<p:commandButton icon="ui-icon-search" style="height:24px;"  actionListener="#{clienteBean.openDialogListCidade}" immediate="true" title="Selecionar cidade"/>
				</h:panelGrid>
					
				<h:panelGrid columns="5" style="padding:5px;">			
					<h:outputText value="Telefone" />		
					<h:outputText value="" />	
					<h:outputText value="Celular" />	
					<h:outputText value="" />		
					<h:outputText value="E-mail" />
					
   					<p:inputMask mask="9?9" style="width:50px;" value="#{clienteBean.currentCliente.cidade.ddd}" id="inputDddTel" maxlength="2" placeHolder=" "/>					
					<p:inputMask mask="9999-9999" style="width:150px;" value="#{clienteBean.currentCliente.telefone}"/>
					<p:inputMask mask="9?9" style="width:50px;"  value="#{clienteBean.currentCliente.cidade.ddd}" id="inputDddCel" maxlength="2" placeHolder=" "/>	
					<p:inputMask mask="9999-9999" style="width:150px;" value="#{clienteBean.currentCliente.celular}"/>
					<p:inputText style="width:370px;" value="#{clienteBean.currentCliente.email}" maxlength="50"/>				
				</h:panelGrid>
				
				<h:panelGrid columns="2" style="padding:5px;">			
					<h:outputText value="RG" />
					<h:outputText value="CPF" />	
					
					<p:inputText style="width:150px;" value="#{clienteBean.currentCliente.rg}" maxlength="20"/>
					<p:inputMask mask="999.999.999-99" style="width:150px;" value="#{clienteBean.currentCliente.cpf}"/>
				</h:panelGrid>
				
				<h:panelGrid columns="1" style="padding:5px;">
					<h:outputText value="* Campos obrigatórios" />
				</h:panelGrid>
			</div>
		</p:panel>			
	</ui:define>
	<ui:define name="popups">
		<ui:include src="formCidade.xhtml"/>
		<ui:include src="listCidade.xhtml"/>
		<ui:include src="listEstado.xhtml"/>
		<ui:include src="formEstado.xhtml"/>
		<ui:include src="listPais.xhtml"/>
		<ui:include src="formPais.xhtml"/>
	</ui:define>
</ui:composition>